<template>
  <div class="main">
    <el-dialog title="创建项目" width="40%" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >

        <el-form-item label="项目名称" prop="projectName">
          <el-input
            v-model="ruleForm.projectName"
            placeholder="请输入项目名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="项目工程号" prop="projectNoCode">
          <el-input
            v-model="ruleForm.projectNoCode"
            maxlength="200"
            show-word-limit
            placeholder="项目工程号"
          ></el-input>
        </el-form-item>

        <el-form-item label="项目全称" prop="projectFullName">
          <el-input
            v-model="ruleForm.projectFullName"
            maxlength="200"
            placeholder="项目全称"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="项目PO" prop="projectCode">
          <el-input
            v-model="ruleForm.projectCode"
            placeholder="请输入PO号"
          ></el-input>
        </el-form-item>

        <el-form-item label="预计投入" prop="duration">
          <el-input
            v-model.number="ruleForm.duration"
            maxlength="5"
            style="width:50%"
            placeholder="请输入预计投入"
          ></el-input>
          <el-select
            v-model="hourUnit"
            placeholder="请选择单位"
            style="width:30%;margin-left:5%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-row align="left" gutter="1">
          <el-col :span="12">
            <el-form-item label="华为代表处" prop="deptId">
              <!--              <treeselect-->
              <!--                v-model="ruleForm.deptId"-->
              <!--                options="deptOptions"-->
              <!--                :normalizer="normalizer"-->
              <!--                placeholder="选择上级部门" />-->

              <el-select
                v-model="ruleForm.deptId"
                clearable
                placeholder="请选择华为代表处"
              >
                <el-option
                  v-for="item in deptOptions"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                >
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目经理" prop="projectManager">
              <el-select
                v-model="ruleForm.projectManager"
                clearable
                placeholder="请选择项目经理"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row align="left" gutter="1">
          <el-col :span="12">
            <el-form-item label="TD" prop="td">
              <el-select
                v-model="ruleForm.td"
                clearable
                placeholder="请选择华为TD"
              >
                <el-option
                  v-for="item in hwUserList"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="PM" prop="pm">
              <el-select
                v-model="ruleForm.pm"
                clearable
                placeholder="请选择华为PM"
              >
                <el-option
                  v-for="item in hwUserList"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="项目描述" prop="remark">
          <el-input
            type="textarea"
            v-model="ruleForm.remark"
            maxlength="200"
            placeholder="项目描述"
            show-word-limit
          ></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">
          立即创建
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createProject, getBox} from "@/api/system/project";
import {listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild} from "@/api/system/dept";
import {listUser,} from "@/api/system/user";
import {userList} from "@/api/system/projectSettings";

export default {
  name: "addform",
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      projectManagerArr: [],
      userList: [],
      hwUserList: [],
      ruleForm: {
        projectName: "",
        projectCode: "",
        duration: "",
        projectManager: "",
        remark: "",
        projectNoCode: "",
        projectFullName: "",
        deptId: "",
        td: "",
        pm: ""

      },
      rules: {
        projectName: [
          {required: true, message: "请输入项目名称", trigger: "blur"},
          {min: 1, max: 20, message: "长度在20 个字符以内", trigger: "blur"}
        ],
        duration: [
          {required: true, message: "请输入工时", trigger: "blur"},
          {type: "number", message: "工时必须为数字值"}
        ],
        projectManager: [
          {required: true, message: "请输入项目经理", trigger: "blur"}
        ],
        deptId: [
          {required: true, message: "华为代表处必填", trigger: "blur"}
        ],


      },
      options: [
        {
          value: "0",
          label: "人天"
        },
        {
          value: "1",
          label: "人月(禁用！！！！)"
        }
      ],
      hourUnit: "0",
      deptOptions: [],
      // 查询参数
      queryParams: {
        deptId: 205
      },
    };
  },
  created() {
    // this.getprojectManager();
    this.init()
    this.getUserList({deptId: 205}, 'userList')
    this.getUserList({deptId: 206}, 'hwUserList')


  },
  methods: {
    init() {
      listDeptExcludeChild("205").then(response => {
        this.deptOptions = response.data
      });
      // listDept().then(response => {
      //   this.deptOptions = this.handleTree(response.data, "deptId");
      // });
    },
    getUserList(param, users) {
      listUser(param).then(
        response => {
          if (response.code == 200) {
            this[users] = response.rows;
          }
        }
      );
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    open() {
      // this.getprojectManager();
      this.dialogFormVisible = true;
    },
    closeForm() {
      this.resetForm("ruleForm");
      this.dialogFormVisible = false;
    },

    edithourUnit() {
      if (this.hourUnit == 0) {
        this.ruleForm.duration = this.ruleForm.duration * 8;
        console.log(this.ruleForm.duration);
        return this.ruleForm.duration;
      } else if (this.hourUnit == 1) {
        this.ruleForm.duration = this.ruleForm.duration * 8 * 22;
        console.log(this.ruleForm.duration);
        return this.ruleForm.duration;
      }
    },
    lookduration(value) {
      // 工时检验
      console.log(value);
    },
    validateJyh(projectCode) {
      // 项目编码校验规则
      let codeReg = new RegExp("[A-Za-z0-9]+"), //正则 英文+数字；
        len = projectCode.length,
        str = "";
      for (var i = 0; i < len; i++) {
        if (codeReg.test(projectCode[i])) {
          str += projectCode[i];
        }
      }
      this.ruleForm.projectCode = str;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // let temphour = this.ruleForm.duration;
          this.ruleForm.temp = this.ruleForm.duration;
          console.log("temphour", this.ruleForm.temp);
          this.edithourUnit();
          // alert("submit!");
          console.log(this.ruleForm);
          createProject(this.ruleForm)
            .then(res => {
              console.log(res);
              if (res.code == 200) {
                this.resetForm(formName);
                this.dialogFormVisible = false;
                this.$parent.init();
              }
            })
            .catch(error => {
              //  if (res.code == 500) {
              this.ruleForm.duration = this.ruleForm.temp;
              this.$message.warning('工时还原为' + this.ruleForm.temp)
              // console.log("temphour", this.ruleForm.temp);
              // }
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped lang="scss"></style>
